<template>
	<view class="user">
		<!-- 个人资料页 -->
		<view class="usewan">
			<view class="login-top">
				<view class="icons">
					<icon type="clear" size="26" @click="errstop" />
				</view>
			</view>
			<view class="list">

				<view class="list-item">
					<view class="list-item-left">头像</view>
					<view class="list-item-right" @click="orderimg">
						<image :src="obj.avatar" class="me-img">
						</image>
						<image src="https://tilin.gitee.io/super_hero_preview/static/icons/left-gray-arrow.png"
							class="iconleft"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-left">昵称</view>
					<view class="list-item-right">
						<!-- <view class="list-text">{{obj.name}}</view> -->
						<input class="list-text" v-model="obj.name" />
						<image src="https://tilin.gitee.io/super_hero_preview/static/icons/left-gray-arrow.png"
							class="iconleft"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-left">ID</view>
					<view class="list-item-right">
						<view class="list-text" style="color: #ccc;">123456789</view>
						<image src="https://tilin.gitee.io/super_hero_preview/static/icons/left-gray-arrow.png"
							class="iconleft"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-left">生日</view>
					<view class="list-item-right">
						<view class="list-text">
							<picker mode="date" :value="obj.birthday" :end="endTime" @change="setBirthday">
								<view class="uni-input">{{obj.birthday}}</view>
							</picker>
						</view>
						<image src="https://tilin.gitee.io/super_hero_preview/static/icons/left-gray-arrow.png"
							class="iconleft"></image>
					</view>
				</view>
				<view class="list-item">
					<view class="list-item-left">性别</view>
					<view class="list-item-right">
						<view class="list-text radio-groups">
							<radio-group @change="radioChange">
								<label class="radio">
									<radio value="1" :checked="obj.sex == 1" />男
								</label>
								<label class="radio">
									<radio value="0" :checked="obj.sex == 0" />女
								</label>
								<label class="radio">
									<radio value="-1" :checked="obj.sex == -1" />保密
								</label>
							</radio-group>
						</view>
						<!-- <image src="https://tilin.gitee.io/super_hero_preview/static/icons/left-gray-arrow.png"
							class="iconleft"></image> -->
					</view>
				</view>
			</view>
			<view class="btn">
				<button type="warn" @click="tuichu">退出登录</button>
			</view>
		</view>


		<usemin v-if="showimg" :avatar="meimg" @showerr="showerr" @forCanel="forCanel"></usemin>

	</view>
</template>

<script>
	import usemin from './usermin.vue'
	export default {
		name: "usercon",
		data() {
			return {
				obj: {
					avatar: 'https://tilin.gitee.io/super_hero_preview/static/icons/default-face.png',
					birthday: '',
					name: '',
					sex: -1
				},
				endTime: null,
				showimg: false,
				meimg: ''
			};
		},
		components: {
			usemin
		},
		created() {
			const value = uni.getStorageSync('storage_obj');
			this.obj.avatar = value.avatar
			this.obj.birthday = value.birthday
			this.obj.name = value.name
			this.obj.sex = value.sex
		},
		mounted() {
			// 设置结束时间为当前年月日
			const now = new Date()
			const y = now.getFullYear()
			const m = (now.getMonth() + 1 + '').padStart(2, 0)
			const d = (now.getDate() + '').padStart(2, 0)
			this.endTime = `${y}-${m}-${d}`
		},
		methods: {
			forCanel(val){
				if(val){
				  this.obj.avatar = val
				}
			   
				this.showimg = false
			},
			//点击头像
			orderimg() {
				let _this = this
				uni.showActionSheet({
					itemList: ["查看我的头像", "从相册选择上传"],
					success(res) {
						var index = res.tapIndex
						if (index == 0) {
							_this.imgyu()
						} else if (index == 1) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success: function(res) {
									_this.meimg = res.tempFilePaths[0]
									_this.showimg = true
								}
							});
						
						}
					}
				})
			},
			//头像预览
			imgyu() {
				let _this = this
				uni.previewImage({
					urls: [_this.obj.avatar]
				})
			},
			//关闭头像预览
			showerr() {
				this.showimg = false
			},
			errstop() {
				let val = {}
				val.avatar = this.obj.avatar
				val.name = this.obj.name
				val.sex = this.obj.sex
				val.birthday = this.obj.birthday
				val.ID = 123456789
				uni.setStorageSync('storage_obj', val)

				this.$emit('loginstop', val)
			},
			//选择的单选框
			radioChange(e) {

				this.obj.sex = e.detail.value
				console.log(this.obj.sex)
			},
			//修改生日确定
			setBirthday(e) {
				this.obj.birthday = e.detail.value.trim()
			},
			//退出登录
			tuichu() {
				uni.showModal({
					title: '退出当前账号?',
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync('storage_obj');
							this.$emit('signout')
						}
					}
				});
			},
		}
	}
</script>

<style>
	.radio {
		padding: 0 0rpx 0 20rpx;
	}

	.radio-groups {
		margin-right: -20rpx;
	}

	.modify-item {
		margin-top: 30rpx;
		height: 80rpx;

		border-bottom: 1px solid #ccc;
	}

	.uni-modal__bd {
		font-size: 35rpx !important;
	}

	.btn {
		margin-top: 20rpx;
	}

	.iconleft {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		top: 28%
	}

	.list {
		margin-top: 30rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0rpx 10rpx 0rpx;
		border-bottom: 1px solid #c2bcbc;
		margin-top: 10rpx;

	}

	.list-item-left {
		width: 20%;
	}

	.list-item-right {
		width: 80%;
		text-align: right;
		position: relative;
		margin-right: 30rpx;
		text-align: -webkit-right;
	}

	.list-text {
		height: 80rpx;
		line-height: 80rpx;
	}

	.me-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;

	}

	.icons {
		display: flex;
		justify-content: flex-end;
		margin: 30rpx 10rpx 0 0;
	}

	.user {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #fff;
		z-index: 9;
		padding: 0 20rpx;
	}
</style>
